<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>

    <!--=====================================================================-->
    <!-- getElementsBy...批量获取对象 -->
    <!-- 效果:5个div,全白的,点一次红一个,全红了就再变白的 -->
    <script>
        //window.onload 等待全局加载
        window.onload = function() {

            //先获取btn
            let oBtn = document.getElementById('btn');
            oBtn.onclick = start;   //为btn绑定事件(函数)

            //具体函数细节
            function start(){
                let divs = document.getElementsByTagName('div');    //获取到的是数组
                //遍历获取每个div对象
                for (let i = 0; i < divs.length; i++) {
                    let oDiv = divs[i];
                    if (oDiv.style.background !== 'red') {
                        toRed(oDiv);
                        return;
                    }
                }

                for (let i = 0; i < divs.length; i++) {
                    let oDiv = divs[i];
                    toBlank(oDiv);
                }
            }
        };

        function toRed(div) {
            div.style.background = 'red';
        }

        function toBlank(div) {
            div.style.background = '';
        }
    </script>

    <!-- 确定div大小,并添加边框 -->
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            margin: 10px;
        }
    </style>
</head>
<body>
<button id="btn">我变</button>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>


</body>
</html>